<template>
  <div class="app-container">
    <Editor ref="editorRef"></Editor>
    <el-button @click="getVal">获取值</el-button>
    <div v-html="val"></div>
  </div>
</template>

<script setup name="Note">
import Editor from "@/components/Editor";
import hljs from "highlight.js";

const editorRef = ref();
const val = ref("");

// 高亮处理函数
const highlightCode = (html) => {
  const tempDiv = document.createElement("div");
  tempDiv.innerHTML = html;
  const codeBlocks = tempDiv.querySelectorAll("pre code");

  codeBlocks.forEach((block) => {
    hljs.highlightBlock(block); // 高亮代码块
    block.classList.add("hljs"); // 确保样式生效
  });
  return tempDiv.innerHTML;
};
const getVal = () => {
  val.value = highlightCode(editorRef.value.getVal());
};
</script>

<style lang="scss" scoped></style>
<style>

</style>
